import * as React from "react";
import * as ReactDOM from "react-dom";

import classNames from "classnames";

import { BaseProps, BaseHelper } from "../base";

import SpaceWraper from "../spaceWraper";
import Button from "../button";

// 传入组件的属性规约
export type AlertProps = {
  onClick?: React.MouseEventHandler<HTMLElement>;
  title?: string;
  onOk?: any;
  onCancel?: React.MouseEventHandler<HTMLElement>;
  bodyStyle?: React.CSSProperties;
  cancelText?: string;
  okText?: string;

  type?: string;
  duration?: number;
  guid?: string;
  zIndex?: number;
  content?: string;
} & BaseProps;
// TypeScript的无状态组件的写法

class Alert extends React.Component<AlertProps> {
  timerID: any;

  static zIndex = 100;

  static generate_guid() {
    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (
      c
    ) {
      let r = (Math.random() * 16) | 0;
      let v = c === "x" ? r : (r & 0x3) | 0x8;
      return v.toString(16);
    });
  }

  static createElement(type) {
    let guid = this.generate_guid();
    let el = document.createElement("div");

    el.setAttribute("id", guid);
    el.setAttribute("type", type);
    document.body.appendChild(el);
    return {
      guid: guid,
      el: el,
    };
  }

  static info(properties: AlertProps) {
    let _properties = properties || {};

    let { guid, el } = this.createElement("info");

    let props: AlertProps = {
      guid: guid,
      zIndex: this.zIndex,
      onCancel: function (e) {
        Alert.remove(guid);
      },
      ..._properties,
    };

    console.log(props, "========info=========");

    ReactDOM.render(React.createElement(Alert, props), el);
    this.zIndex += 1;
    return guid;
  }

  static remove(guid: string) {
    if (document.getElementById(guid)) {
      let self = document.getElementById(guid);
      // 拿到父节点:
      let parent = self?.parentElement;
      // 删除:
      parent && self && parent.removeChild(self);
      this.zIndex = 100;
    }
  }

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const { onOk, duration = 0, guid } = this.props;

    if (this.props.duration > 0) {
      {
        this.timerID = setTimeout(() => {
          onOk ? onOk(null, this.props) : Alert.remove(guid);
        }, 1000 * duration);
      }
    }
  }

  componentWillUnmount() {
    if (this.timerID) {
      clearTimeout(this.timerID);
    }
  }

  innerCancel = (e, props) => {
    setTimeout(() => {
      Alert.remove(props.guid);
    }, 10);

    if (props.onCancel) {
      props.onCancel(e);
    }
  };

  render() {
    const {
      width,
      height,
      children,
      style,

      title = "提示",
      onCancel,
      onOk,
      bodyStyle,
      okText = "确定",
      cancelText = "取消",

      duration = 0,
      type = "info",
      guid,
      content,
      ...rest
    } = this.props;

    let _style = {
      ...style,
    };

    if (type === "info") {
      _style = {
        ..._style,
        width: 400 + "px",
        height: 260 + "px",
      };
    }

    const prefixClass = BaseHelper.getPrefixCls("alert");

    const wrapCls = classNames(
      {
        [`${prefixClass}`]: true,
      },
      this.props.className
    );

    return (
      <div>
        <div className="keda-alert-mask maskFadeIn" />
        <div {...rest} className={wrapCls} style={_style}>
          <div className={`${prefixClass}-header`}>
            <div className="left">{title}</div>

            <div className="right">
              <div
                className="right_close_icon"
                onClick={(e) => {
                  this.innerCancel(e, this.props);
                }}
              />
            </div>
          </div>
          <div className={`${prefixClass}-body`} style={{ ...bodyStyle }}>
            <div className={`${prefixClass}-body-msg-container`}>
              <div className={`${prefixClass}-body-msg-container-left`}>
                <i
                  className={`${prefixClass}-body-msg-container-left-alert-info`}
                />
              </div>
              <div className={`${prefixClass}-body-msg-container-right`}>
                {content}
              </div>
            </div>
          </div>
          <div className={`${prefixClass}-footer`}>
            {duration == 0 && (
              <SpaceWraper>
                <Button
                  onClick={(e) => {
                    onOk ? onOk(e, this.props) : Alert.remove(guid);
                  }}
                >
                  {okText}
                </Button>
                <Button
                  onClick={(e) => {
                    this.innerCancel(e, this.props);
                  }}
                >
                  {cancelText}
                </Button>
              </SpaceWraper>
            )}
          </div>
        </div>
      </div>
    );
  }
}

export default Alert;
